<template>
  <div id="changePWD">
    <div class="changemain">
      <el-form :model="changeObj" label-width="auto" style="max-width: 400px">
        <el-form-item label="原密码">
          <el-input type="password" v-model="changeObj.sourcePassword" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" v-model="changeObj.newPassword" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input type="password" v-model="checkpwd" />
        </el-form-item>
      </el-form>
      <div></div>
      <el-button type="primary" style="width: 100px;margin-left: 100px;" icon="Check" size="default" @click="change()">立即保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import $sys from "../../api/sys";
import { useRouter } from 'vue-router';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
const $router = useRouter();
const changeObj = reactive({});
const checkpwd = ref('');
function change() {
  if (check()) {
    ElMessageBox.confirm(
      '确定修改?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      $sys.changePSWD(changeObj).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: '修改成功,请重新登录!',
            type: 'success'
          })
          $router.replace({
            name: 'login'
          })
          localStorage.removeItem('password');
          localStorage.removeItem('token');
          localStorage.removeItem('boardid');
        }else{
          ElMessage({
            message: res.message,
            type: 'warning'
          })
        }
      }).catch(err=>{      
        ElMessage({
            message: err.data.message,
            type: 'warning'
          })
      })
    })
  }
}
function check() {
  let flag = false;
  if (changeObj.sourcePassword == '' || !changeObj.sourcePassword) {
    ElMessage({
      message: '原密码不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (changeObj.newPassword == '' || !changeObj.newPassword) {
    ElMessage({
      message: '新密码不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (changeObj.newPassword != checkpwd.value) {
    ElMessage({
      message: '两次输入密码不一致!',
      type: 'warning'
    })
    flag = false;
  } else {
    flag = true;
  }
  return flag;
}
</script>

<style scoped>

:deep(*){
    font-size: 16px;
}
#changePWD {
  padding: 10px;
  background: #304053;
  border-radius: 5px;
}
:deep(.el-form-item__label) {
    color: white !important;
}
.changemain {
  margin-top: 20px;
  padding: 20px;
}
:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select__wrapper){
  background-color: #34475b !important;
  border: 1px solid #2b3b4b !important;
  box-shadow: none !important;
  
}
:deep(.el-input__inner),
:deep(.el-textarea__inner),
:deep(.el-select__placeholder){
  color: #ccc!important;
}
</style>

<style lang='less'>
#changePWD{
  .el-button>span{ font-size: 14px !important;}
  .el-message-box{
  background-color: #2f4052 !important;
}
.el-message-box__message,
.el-message-box__title{
  color: #fff;

}}

</style>